<template>
  <div>
    <el-card style="margin-bottom: 10px">
      <category-selector :disabled="showStatus !== ShowStatus.SPU_LIST"></category-selector>
    </el-card>

    <el-card>
      <!-- 列表页面 -->
      <SpuList 
        v-if="showStatus===ShowStatus.SPU_LIST" 
        @setShowStatus="setShowStatus"
        @setCurrentSpu="setCurrentSpu"
      />
     
     <!-- 组件标签对象就是组件对象 -->
      <SpuForm
        v-else-if="showStatus===ShowStatus.ADD_SPU"
        @setShowStatus="setShowStatus"
        :currentSpu="currentSpu"/>
      
      <SkuForm
        v-else="showStatus===ShowStatus.ADD_SKU"
        @setShowStatus="setShowStatus"
        :spu="{ id: currentSpu.id as number, spuName: currentSpu.spuName }"/>
    </el-card>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'SpuList',
  };
</script>

<script lang="ts" setup>
  import { ElCard } from 'element-plus';
  import CategorySelector from '@/components/CategorySelector/index.vue'
  import SpuList from "./components/SpuList.vue";
  import SkuForm from './components/SkuForm.vue'
  import SpuForm from './components/SpuForm.vue'
  import type { SpuModel } from '@/api/product/model/spuModel';
  import {ref} from 'vue'
  import { ShowStatus } from './types';

  const showStatus = ref<ShowStatus>(ShowStatus.SPU_LIST)
  
  const initSpuModel = () => ({
    spuName: '',
    description: '',
    tmId: undefined,
    spuSaleAttrList: [],
    spuImageList: [],
  })
  const currentSpu = ref<SpuModel>(initSpuModel())

  const setShowStatus = (status: ShowStatus) => {
    showStatus.value = status
  }

  const setCurrentSpu = (val: SpuModel=initSpuModel()) => {
    currentSpu.value = val
  }
</script>
